<template>
  <view class="content">
    <view class="topBox">
    
    </view>

    <view class="list">
      <view class="item" >
        <image
          :src="item.poster"
          mode="aspectFill"></image>
        <view class="rightBox">
          <view class="tit">
            <text>{{item.name}}</text>
            <text></text>
          </view>
          <view class="priceBox">
            <view class="prices">
              <text>{{item.price}}金币</text>
              <text></text>
            </view>
            <!-- <view class="tag">
              省2.2
            </view> -->
          </view>
          <view class="btnBox">
            <view class="barBox">
              <view class="sheng">
                剩余数量:{{item.number}}
              </view>
              <view class="bar">
                <liu-progressbar :progress="80" bgColor="red" color="#FFFFFF" :height="'20rpx'" />
              </view>

            </view>

            <view class="btn" >
            
            </view>
          </view>
        </view>
      </view>
	  
	  <uni-forms >
	  	 
	  	<uni-forms-item label="支付宝账号" required>
	  		<uni-easyinput v-model="alipayAccount" placeholder="请输入支付宝的账号/手机号" />
	  	</uni-forms-item>
		<uni-card :is-shadow="false" is-full>
				<text class="uni-h6">目前只支持兑换到支付宝账号，后续会陆续推出兑换到微信和抖音。兑换之后会在24小时内到账。</text>
			</uni-card>
	  	
	  	
	  	<button type="primary" @click="submit()">确认兑换</button>
	  </uni-forms>
	  
    </view>
	
	

  </view>
</template>

<script>
	import store from '@/store/index.js';//需要引入store
	let timer = null;
	export default {
	  computed:{
	  	
	  	
	  
	  
	  },
    data() {
      return {
		pageNum:1,
		item:{},
		alipayAccount:"",
		baseData: {
			userId:'',
			income:0,
			
		},
      }
    },
	onLoad(option) {
		
	
		this.baseData.userId=uni.getStorageSync("userId");
		let jsonString=uni.getStorageSync("prizeItem");
		this.item=JSON.parse(jsonString);
		
		
		// uni.startPullDownRefresh();
	},
    methods: {
		submit(){
			var self=this;
			var data={"userId":self.$data.baseData.userId,"prizeId":self.$data.item.id,"alipayAccount":self.$data.alipayAccount};
			store.dispatch('exchangePrizeData',data).then(() => {
				
				uni.showToast({
					title:"兑换成功",
					icon:'none'
				})
				timer = setTimeout(function() {
					console.log("setTimeout")
					uni.switchTab({
						url:"/pages/user/userInfoAd"
					})
				}, 1000);
				
			})

		},
		clearTimer() {
			// clearTime
			if (timer) {
				clearTimeout(timer);
				timer = null;
			}
		},
    },
	beforeUnmount() {
		// clearTime
		this.clearTimer();
	},
  }
</script>

<style scoped>
  .content {
    min-height: 100vh;
    background-color: #f5f5f5;
  }

  .topBox {
    height: 100rpx;
    background: linear-gradient(to right, #00aaff, #ff00a5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title {
    text-align: center;
    font-size: 55rpx;
    color: #fff;
    font-weight: 700;
    letter-spacing: 10rpx;
  }

  .list {
    width: 96%;
    height: 60vh;
    margin: -5% auto 2%;
  }

  .item {
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 15rpx;
  }

  .item image {
    width: 240rpx;
    height: 240rpx;
    border-radius: 20rpx;
  }

  .item .rightBox {
    width: calc(100% - 260rpx);
    height: 100%;
  }

  .tit {
    margin-bottom: 20rpx;
  }

  .tit text:nth-child(1) {
    font-size: 28rpx;
    font-weight: 550;
    color: #ff007f;
    margin-right: 20rpx;
  }

  .tit text:nth-child(2) {
    font-size: 26rpx;
    color: #333;
    margin-right: 20rpx;
  }

  .priceBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20rpx;
  }

  .prices text:nth-child(1) {
    font-size: 30rpx;
    font-weight: 550;
    color: #ff007f;
    margin-right: 10rpx;
  }

  .prices text:nth-child(2) {
    font-size: 24rpx;
    color: #999;
    margin-right: 20rpx;
    text-decoration: line-through;
  }

  .tag {
    padding: 2rpx 6rpx;
    box-sizing: border-box;
    border: 1px solid #ff007f;
    font-size: 20rpx;
    color: red;
    border-radius: 4rpx;
  }

  .btnBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .barBox {
    width: 50%;
    margin-right: 44rpx;
  }

  .sheng {
    font-size: 24rpx;
    color: #777;
    margin-bottom: 10rpx;
  }

  .btn {
    width: 150rpx;
    line-height: 50rpx;
    background-color: #ff007f;
    text-align: center;
    font-size: 30rpx;
    color: #fff;
    font-weight: 700;
    border-radius: 30rpx;
  }
</style> 